<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue路由</title>
</head>
<body>
<div id="app">

    <h1>{{msg}}</h1>
    <!--    路由连接-->
    <router-link to="/products">商品管理</router-link>
    <router-view></router-view>

</div>
</body>
</html>
<template id="products">
    <div><h3>商品列表</h3>
        <a href="#/products/add">添加商品信息</a>
        <table border="1">
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>价格</th>
                <th>生产日期</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>1</td>
                <td>超短裙</td>
                <td>24.24</td>
                <td>2021-02-03</td>
                <!--<td><a href="">删除</a>  <a href="#products/edit" >修改</a></td>-->
                <td><a href="">删除</a>  <a href="javascript:;" @click.prevent="editRow({id:1,name:'小陈'})">修改</a></td>
            </tr>
        </table>
        <router-view></router-view>
    </div>
</template>
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script src="../js/axios.min.js"></script>
<script>

    const products = {
        template: "#products",
        data(){
            return {}
        },
        methods: {
            editRow(user){
                this.$router.push({path:'/product/edit',query:user});
            }
        }
    };
    //创建添加商品信息的子组件
    const add = {
        template: "<div><form action=''>商品名称: <input type='text'><br> 商品价格: <input type='text'><br> <input type='button' value='保存商品'></form></div>"
    };
    //创建修改子组件
    const edit = {
        template: "<div><form action=''>商品名称: <input type='text'><br> 商品价格: <input type='text'><br> <input type='button' value='修改商品'></form></div>",

    };

    //创建路由对象并定义路由规则
    const router = new VueRouter({
        routes: [
            {path: "/", redirect: '/products'},
            {
                path: '/products',
                name: "products",
                component: products,
                children:[ //子路由  子路由的path属性不能使用/开头  /代表跟路由
                    {path:"add",component: add},
                    {path: "edit", component: edit}
                ]
            }, //path指定路径  component指定组件  name路由名称必须唯一
        ],

    });
    const app = new Vue({
        el: "#app",
        data: {
            msg: "vue中的嵌套路由使用"
        },
        methods: {},
        computed: {},
        components: {},
        router,
    })
</script>
